<template>
	<div class="container" @click="handleGallaryClick">
		<div class="wrapper">
			<swiper :options="swiperOptions">
		        <swiper-slide
		            v-for="(item, index) in imgs"
		            :key="index"
		        >
		            <img class="gallary-img" :src="item" />
		        </swiper-slide>
		        <div class="swiper-pagination" slot="pagination"></div>
		    </swiper>
		</div>
	</div>
</template>

<script>
export default{
	name:'CommonGallary',
	props: {
		imgs: {
			type: Array,
			default () {
				return []
			}
		}
	},
	data () {
		return {
			swiperOptions: {
				pagination: '.swiper-pagination',
				paginationType: 'fraction',
				observeParents: true,
        		observer: true
			}
		}
	},
	methods: {
	    handleGallaryClick () {
	      this.$emit('close')
	    }
  }
}
</script>
<style lang="scss">
	.container .swiper-container{
		overflow: inherit;
		.swiper-pagination-fraction{
      		color: #fff;
        	bottom: -1rem;
  		}
	}
</style>
<style lang="scss" scoped>
	.container{
		display: flex;
	    flex-direction: column;
	    justify-content: center;
	    z-index: 99;
	    position: fixed;
	    left: 0;
	    right: 0;
	    top: 0;
	    bottom: 0;
	    background: #000;
		.wrapper{
			height: 0;
	        width: 100%;
	        padding-bottom: 100%;
	        .gallary-img{
		      	width: 100%;
	      	}
		}
	}

</style>